<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, minimum-scale=1.0" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title>合规检查/通知整改</title>
		<link href="css/common.css" rel="stylesheet" type="text/css" />
		<link href="css/style.css" rel="stylesheet" type="text/css">
		<script type="text/javascript" src="js/rem.js"></script>
		<style type="text/css">
			.notice {
				width:100%;
				height:0.72rem;
				background: #FFF3E0;
				font-family:PingFangSC-Regular,PingFang SC;
				font-weight:400;
				color:rgba(248,110,33,1);
				line-height:0.72rem;
				padding: 0 0.31rem;
				display: flex;
				align-items: center;
			}
			.notice-text {
				font-size: 0.26rem;
				line-height: 0.32rem;
				margin-left: 0.16rem;
				text-align: left;
			}
			.notice+.list{
				margin-top: 0;
			}
			.list {
				width: 100vw;
				height: auto;
				background:#FFFFFF;
				margin-top: 0.16rem;
				padding: 0 0.3rem;
			}
			.item {
				width: 100%;
				height: 0.88rem;
				display: flex;
				align-items: center;
				padding-right: 0.24rem;
				font-size:0.28rem;
				font-family:PingFangSC-Regular,PingFang SC;
				font-weight:400;
				color:rgba(0,0,0,1);
			}
			.item+.item{
				border-top: 1px solid #E8E8E8;
			}

			.item-label {
				flex: 1;
				font-size:0.28rem;
				font-family:PingFangSC-Regular,PingFang SC;
				font-weight:400;
				color:rgba(136,136,136,1);
			}

			.item-content {
				flex: 2;
				font-size:0.28rem;
				font-family:PingFangSC-Regular,PingFang SC;
				font-weight:400;
				color:rgba(34,34,34,1);
				overflow:hidden;
				text-overflow:ellipsis;
				white-space: nowrap;/*加宽度width属来兼容部分浏览*/
			}
			.item-imgs {
				width: 100%;
				display: flex;
				height: auto;
				flex-wrap: wrap;
				word-wrap:break-word;
				word-break:break-all;
				overflow: hidden;
				padding-bottom: 0.32rem;
			}
			.img {
				width:2rem;
				height:2rem;
				margin-right: 0.16rem;
				margin-bottom: 0.16rem;
				object-fit: cover;   /* 替换元素内容大小使其保持其宽高比 */
			}
		</style>
	</head>
	<body>
		<div class="app-nav">
			<text class="app-nav-title">标题</text>
		</div>
		<div class="compliance-content-wrapper">
			<div class="notice">
				<span class="icon-message" style="font-size: 0.32rem;"></span>
				<marquee class="notice-text" direction="left" behavior="slide">距整改截止日期还有3天</marquee>
			</div>
			<div class="list">
				<div class="item">
					<div class="item-label">被查小区</div>
					<div class="item-content">悦玺花苑</div>
				</div>
				<div class="item">
					<div class="item-label">小区负责人</div>
					<div class="item-content">赵经纬</div>
				</div>
				<div class="item">
					<div class="item-label">负责人电话</div>
					<div class="item-content">186 2395 3256</div>
				</div>
				<div class="item">
					<div class="item-label">小区地址</div>
					<div class="item-content">解放北路38号</div>
				</div>
				<div class="item">
					<div class="item-label">不满足项</div>
					<div class="item-content">没有室内消火栓</div>
				</div>
				<div class="item">
					<div class="item-label">整改时间</div>
					<div class="item-content">2020-04-23</div>
				</div>
				<div class="item">
					<div class="item-label">处理意见</div>
					<div class="item-content">尽快安装消火栓，清除通道杂物</div>
				</div>
				<div class="item">
					<div class="item-label">图片</div>
				</div>
				<div class="item-imgs">
					<img class="img" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3252521864,872614242&fm=26&gp=0.jpg" />

					<img class="img" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3252521864,872614242&fm=26&gp=0.jpg" />

					<img class="img" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3252521864,872614242&fm=26&gp=0.jpg" />
				</div>
			</div>
		</div>

		<div class="compliance-bottom-wrapper">
			<div class="compliance-bottom-btn">返回</div>
			<div class="compliance-bottom-btn bg-blue">通知整改</div>
		</div>
	</body>
</html>
